* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}

html {
  font-size: 16px;
}
.box {
  // width: 1000px;
  height: 50px;
  background-color: #222;
  .container {
    padding: 0;

    // 导航栏
    .navbar-header {
      .navbar-brand {
        padding: 0 15px;
        display: flex;
        align-items: center;
      }
    }
    .navbar {
      border: none;
      margin-bottom: 0;
    }
    .navbar-wrapper {
      .navbar-brand {
        padding: 0 15px;
        > img {
          width: 130px;
        }
      }
    }
  }
}

.carousel-inner {
  width: 100%;
  img {
    width: 100%;
  }
}

main {
  // 第一部分
  .c_p {
    .logo {
      img {
        width: 100%;
      }
    }
    ul {
      float: none;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
    }
    background-color: #fbfaf8;
    h1 {
      margin: 0.625rem 1.25rem;
      margin-top: 6.25rem;
      margin-bottom: 1.875rem;
      font-size: 3.125rem;
    }

    h3,
    p {
      margin-right: 1.025rem;
      margin-top: 0.625rem;
    }
    p {
      color: #949392;
    }
    .logo_1 {
      img {
        margin-top: 9.25rem;
      }
    }
  }

  .c_p1 {
    h1 {
      margin: 6.25rem 1.25rem 2.5rem 1.25rem;
      font-size: 3.125rem;
      color: #8fc31f;
    }
    ul {
      margin: 0.625rem 0;
      display: flex;
      align-items: center;
    }

    p {
      padding: 0;
      font-size: 1.125rem;
      color: #949392;
    }
    .logo {
      img {
        width: 100%;
      }
    }

    .logo_1 {
      img {
        margin-top: 11.25rem;
      }
    }
  }
  // 第三部分
  .c_p2 {
    .logo {
      img {
        width: 100%;
      }
    }

    li {
      margin: 1.55rem 0;
    }
    ul {
      float: none;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
    }
    background-color: #0079d7;
    h1 {
      color: #fffefe;
      margin-top: 6.25rem;
      margin-bottom: 4.375rem;
      text-align: center;
    }

    h3,
    p {
      margin-right: 1.025rem;
      margin-top: 0rem;
      color: #fffefe;
    }
    .logo_1 {
      img {
        margin-top: 9.25rem;
      }
    }
  }
  // 第四部分
  .c_p3 {
    background-color: #fffefe;
    .logo {
      img {
        width: 100%;
      }
    }
    h1 {
      margin: 0 0.9375rem;
      margin-top: 5.3125rem;
      margin-bottom: 2.8125rem;
      display: flex;
      justify-content: space-between;
      a {
        display: flex;
        margin-top: 0.625rem;
        text-decoration: none;
        font-size: 1rem;
        color: #949392;
      }
    }
    ul {
     
      li {
        margin-bottom: 0.9125rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        a {
          p {
            margin: 0 50px;
          }

          text-decoration: none;
        }
      }
      video {
        width: 100%;
       height: 200px;
      }
     
    }
  }
  .c_p4 {
    h1 {
      margin: 2.5rem 0 2.5rem 1.875rem;
    }
    p {
      margin-bottom: 2.5rem;
    }
    li {
      display: flex;
      align-items: flex-end;
    }
    a {
      margin-bottom: 1.25rem;
      .logo {
        width: 100%;
      }
    }
  }
}

.c_p5 {
  background-color: #3b3b3b;
  a,
  p {
    margin: 10px 0;
    color: #75767b;
  }
  div {
    position: relative;
  }
  ul:nth-of-type(1) {
    margin: 1.25rem 0;
  }
  ul:nth-of-type(2) {
    position: relative;
    display: flex;
    justify-content: space-evenly;
    margin: 1.875rem 0;
  }
  .logo_1 {
    width: 6.25rem;
    position: absolute;
    margin: -130px 0 0 0;
    display: none;
  }
  img:first-child {
    &:hover + img {
      display: block;
    }
  }

  img:nth-child(3) {
    &:hover + img {
      display: block;
    }
  }
  img:nth-child(5) {
    &:hover + img {
      display: block;
    }
  }
}



// ipad端 >= 768px   < 992px
@media screen and (min-width: 768px) and (max-width: 991px) {
  html {
    font-size: 16px;
  }
  .box {
    height: 100%;
    .navbar-wrapper {
      .navbar {
        margin-bottom: 0;
      }
      // 语言
      #navbar {
        .dropdown {
          position: absolute;
          top: 0;
          right: 50px;
        }
      }
    }
  }
  main {
    .c_p {
      h3,
      p {
        margin: 20px;
      }
      li {
        display: flex;
        flex-direction: column;
      }
      .logo_1 {
        img {
          margin-top: 0px !important;
          margin-left: 3.25rem;
        }
      }
      .logo {
        img {
          width: 100%;
        }
      }
    }

    .logo {
      img {
        width: 100%;
      }
    }
  }

  .c_p3 {
    h1 {
      margin: 1.625rem 2.5rem !important;
    }
    .logo {
      img {
        width: 100%;
      }
    }
  }
  .c_p4 {
    h1 {
      // margin: 2.5rem ;
      font-size: 30px;
    }
  }
}



// 移动端 < 768px
@media screen and (max-width: 765px) {
  .box {
    width: 100%;
    height: 100%;
    .navbar-wrapper {
      .navbar {
        margin-bottom: 0;
      }
      // 语言
      #navbar {
        position: absolute;
        width: 100vw;
        background-color: #222;
        .dropdown {
        }
      }
    }
  }
  main {
    .c_p {
      h1 {
        text-align: center;
        font-size: 1.25rem;
        margin-top: 0.625rem;
        margin-bottom: 0.625rem;
      }
      h3 {
        text-align: center;
        margin-top: 0;
        font-size: 0.9rem;
      }
      ul {
        P {
          font-size: 0.75rem;
        }
      }
    }
    .c_p1 {
      h1 {
        text-align: center;
        font-size: 1.25rem;
        margin-top: 0.625rem;
        margin-bottom: 0.625rem;
      }
      ul {
        margin: 0.625rem 0 0 -0.75rem;
        position: 12px;
        P {
          font-size: 0.8rem;
          margin-bottom: 0;
        }
      }
    }

    .c_p2 {
      h1 {
        text-align: center;
        font-size: 1.25rem;
        margin-top: 0.625rem;
        margin-bottom: 0.625rem;
      }
      ul {
        li {
          margin: 2.25rem 0;
          margin: 0;
        }
        h3 {
          font-size: 1rem;
        }
        P {
          font-size: 0.5rem;
          margin-bottom: 0;
        }
      }
    }

    .c_p3 {
      h1 {
        margin: 0.625rem 1.25rem;
        font-size: 1.25rem;

        a {
          margin-top: 0.3125rem;
          font-size: 0.625rem;
        }
      }

      .logo {
        img {
          width: 100%;
        }
      }
    }

    .c_p4 {
      h1 {
        font-size: 1.25rem;
        margin: 0.625rem 0 !important;
        margin-left: 1.65rem !important;
      }
      p {
        margin-bottom: 0.625rem !important;
        font-size: 0.625rem;
      }
    }
  }

  .c_p5 {

    a ,p  {
      font-size: 12px;
      margin: .3125rem 0;
    }
 
    ul {
      margin: 0 !important;
    }
    ul:nth-child(2) {
      margin-top: .625rem !important;
    }
  }
}
